<template>
  <div>
    <el-alert title="查询信息" type="info" :closable="false"></el-alert>
    <el-form inline :model="form">
      <el-form-item label="角色名称">
        <el-input
          v-model="form.roleName"
          placeholder="请输入角色名称"
          size="medium"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" size="medium" @click="search(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-alert title="权限信息列表" type="info" :closable="false"></el-alert>
    <el-table :data="tableData" stripe>
      <el-table-column
        label="角色"
        prop="roleName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="modify(scope.row)"
            >修改权限</el-link
          >&nbsp;
          <el-link type="primary" :underline="false" @click="del(scope.row)"
            >删除权限</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-col :span="10">
        <el-pagination
          background
          :current-page="pageData.currentPage"
          layout="total, prev, pager, next, jumper"
          :total="pageData.count"
          :page-size="pageData.pageSize"
          @current-change="handleCurrentChange"
          v-if="pageData.count && pageData.count != 0"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="修改权限菜单" :visible.sync="modifyAuthority" width="20%">
      <el-scrollbar style="height: 300px">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          :default-checked-keys="defaultCheckedKeys"
          ref="tree"
          :props="defaultProps"
        >
        </el-tree>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyAuthority = false">取 消</el-button>
        <el-button type="primary" @click="handle">确 定</el-button>
      </div>
    </el-dialog>
    <p class="pStyle">南京中网卫星通信股份有限公司</p>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import { construct, destruct } from "@aximario/json-tree";
import * as serviceApi from "../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "AuthorityManagement",
  data() {
    return {
      form: {
        roleName: "",
      },
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      modifyAuthority: false,
      treeData: null,
      defaultProps: {
        children: "children",
        label: "name",
      },
      defaultCheckedKeys: [],
      roleId: null,
    };
  },
  methods: {
    queryRoleInfoList(queryData) {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"pageSize\\":10,\\"currentPage\\":${queryData.currentPage}},\\"roleName\\":\\"${queryData.roleName}\\"}","serviceCode":"listRoleInfo","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.pageData = res.data.parameter.page;
        let list = res.data.parameter.list;
        for (let i = 0; i < list.length; i++) {
          list[i].createTime = moment(list[i].createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        this.tableData = list;
      });
    },
    queryRoleMenuList(roleId) {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"roleId\\":\\"${roleId}\\"}","serviceCode":"listRoleMenu","timestamp":"","uuid":""}`,
      }).then((res) => {
        let list = res.data.parameter.list;
        let result = construct(list, {
          id: "id",
          pid: "parentId",
          children: "children",
        });
        for (let i = 0; i < result.length; i++) {
          if (!result[i].children && result[i].checked == "true") {
            this.defaultCheckedKeys.push(result[i].id);
          }
          if (result[i].children) {
            result[i].children.forEach((item) => {
              if (item.checked == "true") {
                this.defaultCheckedKeys.push(item.id);
              }
            });
          }
        }
        this.treeData = result;
      });
    },
    search(currentPage) {
      let queryData = {
        currentPage: currentPage,
        roleName: this.form.roleName,
      };
      this.queryRoleInfoList(queryData);
    },
    handleCurrentChange(val) {
      this.search(val);
    },
    modify(row) {
      this.roleId = row.id;
      this.modifyAuthority = true;
      (this.treeData = null), (this.defaultCheckedKeys = []);
      this.queryRoleMenuList(this.roleId);
    },
    handle() {
      this.modifyAuthority = false;
      let arr = this.$refs.tree.getCheckedKeys();
      arr = JSON.stringify(arr);
      arr = arr.replace(/\"/g, '\\"');
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"roleId\\":\\"${this.roleId}\\",\\"menuIds\\":${arr}}","serviceCode":"bindRoleMenu","timestamp":"","uuid":""}`,
      }).then((res) => {
        let resultCode = res.data.resultcode;
        let message = res.data.parameter.message;
        if (resultCode == "0000") {
          this.$message({
            message: message,
            type: "success",
          });
        } else {
          this.$message({
            message: message,
            type: "warning",
          });
        }
      });
    },
    del(row) {
      this.$confirm("您确定要删除该角色下菜单？", "删除权限", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"id\\":\\"${row.id}\\"}","serviceCode":"unbindRoleMenu","timestamp":"","uuid":""}`,
          }).then((res) => {
            let message = res.data.parameter.message;
            this.$message({
              type: "success",
              message: message,
              duration: 1000,
              onClose: () => {
                let queryData = {
                  roleName: "",
                  currentPage: "1",
                };
                this.queryRoleInfoList(queryData);
              },
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除!",
          });
        });
    },
  },
  created() {
    let queryData = {
      roleName: "",
      currentPage: "1",
    };
    this.queryRoleInfoList(queryData);
  },
};
</script>

<style lang="less" scoped>
.pStyle{
  position: absolute;
  bottom: 1%;
  right: 2%;
}
.el-alert {
  line-height: 30px;
  margin-top: 20px;
  /deep/ .el-alert__title {
    font-size: 16px;
  }
}
.el-form {
  margin: 20px 0;
  margin-left: 30px;
}
.el-scrollbar /deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>